<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误单词页面</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <el-menu mode="horizontal">
        <el-menu-item @click="navigateHome">首页</el-menu-item>
    </el-menu>

    <div style="padding: 20px;">
        <!-- 导出和重新测试按钮 -->
        <el-button type="primary" @click="exportToExcel">导出为 Excel</el-button>
        <el-button type="danger" @click="startErrorRetest">错词重新测试</el-button>

        <!-- 错误单词表格 -->
        <el-table :data="errorWords" style="width: 100%; margin-top: 20px;" stripe>
            <el-table-column prop="word" label="单词" width="150"></el-table-column>
            <el-table-column label="英式音标" width="150">
                <template slot-scope="scope">
                    <span @click="playAudio(scope.row.ukVoice)" style="cursor: pointer; color: #409EFF;">
                        {{ scope.row.ukPhonetic }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="美式音标" width="150">
                <template slot-scope="scope">
                    <span @click="playAudio(scope.row.usVoice)" style="cursor: pointer; color: #409EFF;">
                        {{ scope.row.usPhonetic }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="wangLuMeaning" label="中文意思" width="200"></el-table-column>
            <el-table-column prop="errorCount" label="错误次数" width="100" sortable></el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.totalItems">
        </el-pagination>
    </div>
</div>

<!-- 引入 Vue 和 ElementUI -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            errorWords: [],
            pagination: {
                currentPage: 1,
                pageSize: 50,
                totalItems: 0
            }
        },
        created() {
            this.fetchErrorWords();
        },
        methods: {
            navigateHome() {
                window.location.href = '../index.html';
            },
            // 	response.data.data.data: Accesses the nested data array inside the response’s data. response.data.data.total: Accesses the total item count.
            //错了两次了
            //response.data 得到的是响应的数据
            //response.data.data
            fetchErrorWords() {
                axios.get(`/errorWord/all?page=${this.pagination.currentPage}&size=${this.pagination.pageSize}`)
                    .then(response => {
                        this.errorWords = response.data.data.errorWords;
                        this.pagination.totalItems = response.data.data.errorWordsCount;
                    })
                    .catch(error => console.error('获取错误单词失败:', error));
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.fetchErrorWords();
            },
            handlePageChange(page) {
                this.pagination.currentPage = page;
                this.fetchErrorWords();
            },
            playAudio(audioUrl) {
                const audio = new Audio(audioUrl);
                audio.play();
            },
            exportToExcel() {
                axios.get('/errorWord/exportAllWordsToExcel', { responseType: 'blob' })
                    .then(response => {
                        const url = window.URL.createObjectURL(new Blob([response.data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', '错误单词列表.xlsx');
                        document.body.appendChild(link);
                        link.click();
                    })
                    .catch(error => console.error('导出错误单词失败:', error));
            },
            startErrorRetest() {
                window.location.href = 'error-test-select.html';
            }
        }
    });
</script>
</body>
</html>